<template>
	<view class="container">
		<!-- 状态栏占位 -->
		<view class="status-bar"></view>
		
		<!-- 基本信息 -->
		<view class="basic-info">
			<view class="section-title">基本信息</view>
			<view class="info-grid">
				<view class="info-item">
					<text class="info-label">计划日期</text>
					<text class="info-value">{{ formatDate(inventoryDetail.plannedDate) || '2025-10-16 10:17:16' }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">盘点人</text>
					<text class="info-value">{{ inventoryDetail.inventoryUser || '若依' }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">备件仓库</text>
					<text class="info-value">{{ getWarehouseName(inventoryDetail.warehouseCode) || '主仓库' }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">备注</text>
					<text class="info-value">{{ inventoryDetail.remark || '1' }}</text>
				</view>
			</view>
		</view>
		
		<!-- 备件信息 -->
		<view class="spare-parts-info">
			<view class="section-title">备件信息</view>
			<view class="table-wrapper">
				<view class="table-container">
					<view class="table-header">
						<text class="header-cell">备件编号</text>
						<text class="header-cell">备件名称</text>
						<text class="header-cell">规格型号</text>
						<text class="header-cell">备件类型</text>
						<text class="header-cell">理论在库数</text>
						<text class="header-cell">实际在库数</text>
						<text class="header-cell">盘盈数量</text>
						<text class="header-cell">盘亏数量</text>
					</view>
					<view class="table-body">
						<view class="table-row" v-for="(item, index) in sparePartsList" :key="index">
							<text class="table-cell">{{ item.partCode || '1' }}</text>
							<text class="table-cell">{{ item.partName || '备件1' }}</text>
							<text class="table-cell">{{ item.specification || '1' }}</text>
							<text class="table-cell">{{ item.partType || '轴承' }}</text>
							<text class="table-cell">{{ item.theoreticalQuantity || 20 }}</text>
							<text class="table-cell">{{ item.actualQuantity || 21 }}</text>
							<text class="table-cell surplus" v-if="getSurplusQuantity(item) > 0">+{{ getSurplusQuantity(item) }}</text>
							<text class="table-cell" v-else>0</text>
							<text class="table-cell deficit" v-if="getDeficitQuantity(item) > 0">{{ getDeficitQuantity(item) }}</text>
							<text class="table-cell" v-else>0</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 返回按钮 -->
		<view class="action-buttons">
			<button class="return-btn" @click="goBack">返回</button>
		</view>
	</view>
</template>

<script>
	import { getInventory } from '@/api/inventory/inventory.js'
	
	export default {
		data() {
			return {
				inventoryId: null,
				inventoryDetail: {
					plannedDate: '2025-10-16 10:17:16',
					inventoryUser: '若依',
					warehouseCode: 'WH001',
					remark: '1'
				},
				sparePartsList: [
					{
						partCode: '1',
						partName: '备件1',
						specification: '1',
						partType: '轴承',
						theoreticalQuantity: 20,
						actualQuantity: 21
					}
				],
				// 仓库映射
				warehouseMapping: {
					'WH001': '主仓库',
					'WH002': '备用仓库',
					'WH003': '临时仓库',
					'WH004': '大连仓库'
				}
			}
		},
		
		onLoad(options) {
			console.log('详情页面加载，参数:', options);
			if (options.id) {
				this.inventoryId = options.id;
				this.loadDetailData();
			} else {
				uni.showToast({
					title: '参数错误',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		},
		
		methods: {
			// 加载详情数据
			async loadDetailData() {
				try {
					uni.showLoading({ title: '加载中...' });
					
					// 使用现有的getInventory接口获取详情
					const res = await getInventory(this.inventoryId);
					console.log('详情数据:', res);
					
					if (res && res.code === 200) {
						this.inventoryDetail = res.data || {};
						console.log('设置基本信息:', this.inventoryDetail);
						
						// 模拟备件数据（实际项目中应该从后端获取）
						this.sparePartsList = [
							{
								partCode: '1',
								partName: '备件1',
								specification: '1',
								partType: '轴承',
								theoreticalQuantity: 20,
								actualQuantity: 21
							}
						];
						console.log('设置备件数据:', this.sparePartsList);
					} else {
						// 如果API失败，使用模拟数据
						console.log('API失败，使用模拟数据');
						this.inventoryDetail = {
							plannedDate: '2025-10-16 10:17:16',
							inventoryUser: '若依',
							warehouseCode: 'WH001',
							remark: '1'
						};
						this.sparePartsList = [
							{
								partCode: '1',
								partName: '备件1',
								specification: '1',
								partType: '轴承',
								theoreticalQuantity: 20,
								actualQuantity: 21
							}
						];
					}
					
					uni.hideLoading();
				} catch (error) {
					uni.hideLoading();
					console.error('加载详情失败:', error);
					
					// 使用模拟数据作为备选方案
					console.log('使用模拟数据作为备选方案');
					this.inventoryDetail = {
						plannedDate: '2025-10-16 10:17:16',
						inventoryUser: '若依',
						warehouseCode: 'WH001',
						remark: '1'
					};
					this.sparePartsList = [
						{
							partCode: '1',
							partName: '备件1',
							specification: '1',
							partType: '轴承',
							theoreticalQuantity: 20,
							actualQuantity: 21
						}
					];
				}
			},
			
			// 返回
			goBack() {
				uni.navigateBack();
			},
			
			// 获取仓库名称
			getWarehouseName(code) {
				console.log('获取仓库名称，code:', code);
				if (!code) {
					return '主仓库';
				}
				const name = this.warehouseMapping[code] || code;
				console.log('仓库名称:', name);
				return name;
			},
			
			// 格式化日期
			formatDate(dateStr) {
				console.log('格式化日期，输入:', dateStr);
				if (!dateStr) {
					console.log('日期为空，返回默认值');
					return '2025-10-16 10:17:16';
				}
				try {
					let formattedDateStr = dateStr;
					if (dateStr.includes(' ')) {
						formattedDateStr = dateStr.replace(' ', 'T');
					}
					const date = new Date(formattedDateStr);
					
					if (isNaN(date.getTime())) {
						console.log('日期解析失败，返回原始值');
						return dateStr;
					}
					
					const formatted = date.toLocaleDateString('zh-CN', {
						year: 'numeric',
						month: '2-digit',
						day: '2-digit'
					}) + ' ' + date.toLocaleTimeString('zh-CN', {
						hour: '2-digit',
						minute: '2-digit'
					});
					console.log('格式化后的日期:', formatted);
					return formatted;
				} catch (error) {
					console.error('日期格式化错误:', error);
					return dateStr || '2025-10-16 10:17:16';
				}
			},
			
			// 计算盘盈数量
			getSurplusQuantity(item) {
				const theoretical = parseInt(item.theoreticalQuantity) || 0;
				const actual = parseInt(item.actualQuantity) || 0;
				return actual > theoretical ? actual - theoretical : 0;
			},
			
			// 计算盘亏数量
			getDeficitQuantity(item) {
				const theoretical = parseInt(item.theoreticalQuantity) || 0;
				const actual = parseInt(item.actualQuantity) || 0;
				return theoretical > actual ? theoretical - actual : 0;
			}
		}
	}
</script>

<style>
	/* 状态栏占位 */
	.status-bar {
		width: 100%;
		background-color: #4a94ff;
	}

	/* 头部区域 */
	.header-right {
		width: 20px;
	}

	/* 基本信息 */
	.basic-info {
		background-color: white;
		margin: 15px;
		border-radius: 8px;
		padding: 20px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.section-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin-bottom: 15px;
		padding-bottom: 10px;
		border-bottom: 1px solid #eee;
	}

	.info-grid {
		display: flex;
		flex-direction: column;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 0;
		border-bottom: 1px solid #f5f5f5;
	}

	.info-item:last-child {
		border-bottom: none;
	}

	.info-label {
		font-size: 14px;
		color: #666;
		width: 80px;
		flex-shrink: 0;
	}

	.info-value {
		font-size: 14px;
		color: #333;
		flex: 1;
		text-align: right;
	}

	/* 备件信息 */
	.spare-parts-info {
		background-color: white;
		margin: 15px;
		border-radius: 8px;
		padding: 20px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.table-wrapper {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.table-container {
		min-width: 800px;
		width: 100%;
	}

	.table-header {
		display: flex;
		background-color: #f8f9fa;
		border-radius: 4px;
		overflow: hidden;
	}

	.header-cell {
		flex: 1;
		padding: 12px 8px;
		font-size: 12px;
		font-weight: bold;
		color: #333;
		text-align: center;
		border-right: 1px solid #dee2e6;
		min-width: 80px;
		white-space: nowrap;
	}

	.header-cell:last-child {
		border-right: none;
	}

	.table-body {
		display: flex;
		flex-direction: column;
	}

	.table-row {
		display: flex;
		border-bottom: 1px solid #dee2e6;
	}

	.table-row:last-child {
		border-bottom: none;
	}

	.table-cell {
		flex: 1;
		padding: 12px 8px;
		font-size: 12px;
		color: #333;
		text-align: center;
		border-right: 1px solid #dee2e6;
		min-width: 80px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.table-cell:last-child {
		border-right: none;
	}

	.surplus {
		color: #28a745;
		font-weight: bold;
	}

	.deficit {
		color: #dc3545;
		font-weight: bold;
	}

	/* 操作按钮 */
	.action-buttons {
		padding: 20px;
		display: flex;
		justify-content: center;
	}

	.return-btn {
		background-color: #6c757d;
		color: white;
		border: none;
		border-radius: 6px;
		padding: 12px 30px;
		font-size: 14px;
		font-weight: 500;
		cursor: pointer;
	}

	.return-btn:active {
		background-color: #5a6268;
	}
</style>